<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 不加defer，在首屏渲染前会去等待文件下载和执行完后，才继续解析html绘制然后触发DCL和后续LCP\FP等hooks -->
  <!-- <script src="./js/map测试.js"></script>  -->
  <!-- 加了defer之后，下载是异步的，不影响继续解析dom，解析完后会直接绘制页面并触发LCP\FP..钩子，而DCL钩子会在脚本下载下来并执行后触发 -->
  <!-- <script src="./js/箭头函数.js" defer></script> -->
</head>
<body>
  <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero asperiores ad neque. Accusantium autem fugiat delectus sit voluptatum, culpa repellendus! Quos labore repellat obcaecati quisquam cupiditate eaque et, cumque ex!</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium pariatur exercitationem quibusdam at, nisi, explicabo, accusamus fuga voluptate ex nesciunt itaque repellat veniam animi sint eveniet eius! Voluptate, saepe quod.</div>
  <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem quod atque cumque eum officia reprehenderit ab repellat non, tempora libero voluptatibus consequatur in facere, eaque modi quaerat et voluptas culpa!</div>
  <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat ea laboriosam iusto, sapiente quidem quia deserunt, asperiores eum quasi odit cupiditate beatae tenetur illum sint in similique repellendus debitis autem!</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat adipisci ratione animi nulla quisquam, illum delectus qui eum eligendi sunt, sint beatae doloribus iure optio ipsam aut id minus nemo.</div>
  <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id aliquid voluptatibus autem reprehenderit atque ratione eaque fugit asperiores perspiciatis doloribus! Deleniti facilis doloremque, voluptatum cumque fugit sequi facere nam temporibus!</div>
  <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore dolorum labore natus suscipit mollitia ut. Sed, repellendus libero! Sunt quis tempore ipsam, fugiat impedit voluptatem assumenda reiciendis blanditiis excepturi pariatur.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur nisi possimus rem molestiae, ad aliquid ab repellendus incidunt quam deserunt sed, rerum totam nesciunt id facere fuga excepturi eum sequi?</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa blanditiis rem soluta, voluptas quidem necessitatibus expedita laudantium nihil, repellat nulla inventore similique sit earum, suscipit quibusdam cum in architecto possimus.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi corporis nesciunt blanditiis minus cumque saepe quae soluta quo magni, maiores iste cum voluptatem totam placeat dolor autem ad delectus odio.</div>
  <!-- 脚本放在最后的触发流程和加了defer差不多，解析到这一步之后，前面所有的dom会直接绘制出来，但是后面的dom没有解析到，需要等待这个脚本文件的下载和执行完后才会继续解析绘制后续内容，内容绘制完后触发DCL -->
  <script src="./js/map测试.js"></script> 
  <div>啊各地阿苏古大姑的</div>
</body>
</html>